<template>
  <div>
    <el-button @click="show_insertaccount()" type="success" style="float: right;margin-bottom: 5px">新增用户</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phoneNumber" label="手机号"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          
          <el-button @click="show_updatedialog(scope.row)" type="warning" size="small">修改</el-button>
          <el-button @click="del_account(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  

  <el-pagination
      class="el-pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.currentPage"
      :page-sizes="[5, 10, 15,20]"
      :page-size="formInline.pageSize"
      layout="total, prev, pager, next, sizes, jumper"
      :total="formInline.total">
  </el-pagination>

    <el-dialog title="用户信息修改" :visible.sync="dialogFormVisible">
      <el-form :model="formdata">
        
          <el-input v-model="formdata.id"  style="display: none;"></el-input>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="formdata.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="formdata.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="formdata.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update_account()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="用户信息注册" :visible.sync="dialogFormVisible_insert">
      <el-form :model="formdata">
        
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="formdata.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="formdata.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="formdata.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_insert = false">取 消</el-button>
        <el-button type="primary" @click="insert_account()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
export default {
  name: "AccountView",
  
  data() {
    return {
      formInline: {
        currentPage: 1,
        pageSize: 5,
        total: 5,
      },
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,

      dialogTableVisible_insert: false,
      dialogFormVisible_insert: false,
      formLabelWidth: '120px',
      formdata: {
        id:"",
        userName:"",
        email:"",
        phoneNumber:"",
      }
    }
  },
  created() {
    this.selectAccounts();
  },
  methods: {
    show_insertaccount(){
      this.dialogFormVisible_insert = true;
    },
    insert_account() {
      let url = "/account/insertAccount";
      let data = {
        "userName":this.formdata.userName,
        "email":this.formdata.email,
        "phoneNumber":this.formdata.phoneNumber,
      };
      this.$axios.post(url,data).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1000
          })
          
          this.selectAccounts();
        }
      })
      this.dialogFormVisible_insert = false
    },
    
    show_updatedialog(row){
      this.formdata = {...row};
      this.dialogFormVisible =true;
      
    },
    
    del_account(id) {
      let url = "/account/deleteAccount";
      let data = {
        "id": id,
      }
      this.$axios.post(url,data).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1000
          })
          this.selectAccounts();
        }
      })
     
    }, 
    update_account() {
        let url = "/account/updateAccount";
        let data = {
          "id":this.formdata.id,
          "userName":this.formdata.userName,
          "email":this.formdata.email,
          "phoneNumber":this.formdata.phoneNumber,
        };
        this.$axios.post(url,data).then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.selectAccounts();
          }
        })
      this.dialogFormVisible =false;
      },
      
    
    selectAccounts() {
      let url = "/account/selectAccount";
      // 这种方式传参：就是普通的传参方式：
      let params = new URLSearchParams();
      params.append("pageNum",this.formInline.currentPage);
      params.append("pageSize",this.formInline.pageSize);
      
      this.$axios.post(url,params).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1000
          })
          this.tableData = res.data.data.list;
          this.formInline.total=res.data.data.total;
          this.formInline.currentPage=res.data.data.pageNum;
        }
      })
    },
    handleSizeChange(val) {
      this.formInline.pageSize=val;
      this.selectAccounts();
    },
    handleCurrentChange(val) {
      this.formInline.currentPage=val;
      this.selectAccounts();
    }
  },
}
</script>
<style scoped lang="less">

</style>